<template>
	<view class="content">
		<view class="main">
			<text class="main_text">
				基础信息
			</text>
			<view class="info-item info_item_input">
				<span>邮箱:</span>
				<input class="input" placeholder="@outlook.com" type="text" v-model="userinfo.email" />
			</view>
			<view class="info-item info_item_input">
				<span>昵称:</span>
				<input class="input" placeholder="nickName" type="text" v-model="userinfo.nickName" />
			</view>
			<view class="info-item info_item_input">
				<span>姓名:</span>
				<input class="input" placeholder="name" type="text" v-model="userinfo.userName" />
			</view>
			<view class="info-item info_item_input">
				<span>手机号:</span>
				<input class="input" placeholder="请输入11位手机号" type="text" v-model="userinfo.phonenumber" />
			</view>
			<view class="info-item info_item_input">
				<span>性别:</span>
				<view class="marginautu">
					<uni-forms-item style="margin: 0;display: flex;align-items: center;" name="sex">
						<uni-data-checkbox v-model="userinfo.sex" :localdata="sexs" />
					</uni-forms-item>
				</view>
			</view>
			<view class="info-item info_item_input" style="justify-content: space-between;align-items: center;">
				<span>学历:</span>
				<view style="display: flex;align-items: center;font-size: 30upx;">
					<picker @change="bindPickerxueliChange" v-if="sexeducation!=null"
						:value="userinfo.userOtherInfo.education?userinfo.userOtherInfo.education:0"
						:range="sexeducation" :range-key="'dictLabel'">
						<view class="uni-input" v-if="sexeducation[userinfo.userOtherInfo.education]!=undefined">
							{{ sexeducation[userinfo.userOtherInfo.education].dictLabel }}
						</view>
						<view v-else class="">
							暂无
						</view>
					</picker>
				</view>
			</view>
			<view class="info-item info_item_input">
				<span>毕业院校:</span>
				<input class="input" placeholder="陕西***大学" type="text"
					v-model="userinfo.userOtherInfo.graduationInstitution" />
			</view>
			<view class="info-item info_item_input">
				<span>住址:</span>
				<input class="input" placeholder="当前住址" type="text" v-model="userinfo.userOtherInfo.address" />
			</view>
			<view class="info-item info_item_input">
				<span>专业:</span>
				<input class="input" placeholder="专业" type="text" v-model="userinfo.userOtherInfo.speciality" />
			</view>
		</view>

		<view class="main">
			<text class="main_text">
				详细信息
			</text>
			<view class="info-item info_item_inputs">
				<span>签订时间:</span>
				<view class="uni-list  inputs">
					<view class="uni-list-cell">
						<view class="uni-list-cell-db">
							<picker mode="date" :value="date" :start="startDate" :end="endDate"
								@change="bindTimedataChange">
								<view class="uni-input">{{ date }}</view>
							</picker>
						</view>
					</view>
				</view>
			</view>
			<view class="info-item info_item_inputs">
				<span>入职时间:</span>
				<view class="uni-list marginautu  inputs">
					<view class="uni-list-cell">
						<view class="uni-list-cell-db">
							<picker mode="date" :value="dates" :start="startDate" :end="endDate"
								@change="bindTimedatasChange">
								<view class="uni-input">{{ dates }}</view>
							</picker>
						</view>
					</view>
				</view>
			</view>

			<view class="info-item info_item_inputs">
				<span>身份证号:</span>
				<input class="inputs" placeholder="请输入18位身份证号" type="text" v-model="userinfo.userOtherInfo.idCard" />
			</view>
			<view class="info-item info_item_inputs">
				<span>银行卡号:</span>
				<input class="inputs" placeholder="银行卡号" type="text" v-model="userinfo.userOtherInfo.bankCard" />
			</view>
			<view class="info-item info_item_inputs">
				<span>身份证地址:</span>
				<input class="inputs" placeholder="身份证详细地址" type="text"
					v-model="userinfo.userOtherInfo.idCardAddress" />
			</view>
			<view class="info-item info_item_inputs">
				<span>银行卡名称:</span>
				<input class="inputs" placeholder="开户行名称" type="text" v-model="userinfo.userOtherInfo.bankName" />
			</view>
			<view class="info-item info_item_inputs">
				<span>开户行地址:</span>
				<input class="inputs" placeholder="开户行地址" type="text" v-model="userinfo.userOtherInfo.bankAddress" />
			</view>
		</view>
		<view class="main">
			<text class="main_text">
				身份信息
			</text>
			<view class="info-item">
				<span>身份证正面:</span>
				<view class="uploadimg">
					<img v-if="userinfo.userOtherInfo.idCardZ"
						:src="imgurl(userinfo.userOtherInfo.idCardZ ? userinfo.userOtherInfo.idCardZ : '')"
						:alt="userinfo.userOtherInfo.idCardZ ? ' 加载失败' : '未上传'">
					<view v-else class="img_icon">
						<svg class="icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="200"
							height="200">
							<path
								d="M304.128 456.192c48.64 0 88.064-39.424 88.064-88.064s-39.424-88.064-88.064-88.064-88.064 39.424-88.064 88.064 39.424 88.064 88.064 88.064zm0-116.224c15.36 0 28.16 12.288 28.16 28.16s-12.288 28.16-28.16 28.16-28.16-12.288-28.16-28.16 12.288-28.16 28.16-28.16z"
								fill="#e6e6e6" />
							<path
								d="M887.296 159.744H136.704C96.768 159.744 64 192 64 232.448v559.104c0 39.936 32.256 72.704 72.704 72.704h198.144L500.224 688.64l-36.352-222.72 162.304-130.56-61.44 143.872 92.672 214.016-105.472 171.008h335.36C927.232 864.256 960 832 960 791.552V232.448c0-39.936-32.256-72.704-72.704-72.704zm-138.752 71.68v.512H857.6c16.384 0 30.208 13.312 30.208 30.208v399.872L673.28 408.064l75.264-176.64zM304.64 792.064H165.888c-16.384 0-30.208-13.312-30.208-30.208v-9.728l138.752-164.352 104.96 124.416-74.752 79.872zm81.92-355.84l37.376 228.864-.512.512-142.848-169.984c-3.072-3.584-9.216-3.584-12.288 0L135.68 652.8V262.144c0-16.384 13.312-30.208 30.208-30.208h474.624L386.56 436.224zm501.248 325.632c0 16.896-13.312 30.208-29.696 30.208H680.96l57.344-93.184-87.552-202.24 7.168-7.68 229.888 272.896z"
								fill="#e6e6e6" />
						</svg>
					</view>
					<button style="margin: 0;" class="mini-btn" type="primary" size="mini" @click="uploadidCardZ">{{
					idCardImg ?
						userinfo.userOtherInfo.idCardZ != null ? '重新上传' : '上传正面' : '上传中...' }}</button>
				</view>
			</view>
			<view class="info-item">
				<span>身份证反面:</span>
				<view class="uploadimg">
					<img v-if="userinfo.userOtherInfo.idCardF"
						:src="imgurl(userinfo.userOtherInfo.idCardF ? userinfo.userOtherInfo.idCardF : '')"
						:alt="userinfo.userOtherInfo.idCardF ? '加载失败' : '未上传'">
					<view v-else class="img_icon">
						<svg class="icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="200"
							height="200">
							<path
								d="M304.128 456.192c48.64 0 88.064-39.424 88.064-88.064s-39.424-88.064-88.064-88.064-88.064 39.424-88.064 88.064 39.424 88.064 88.064 88.064zm0-116.224c15.36 0 28.16 12.288 28.16 28.16s-12.288 28.16-28.16 28.16-28.16-12.288-28.16-28.16 12.288-28.16 28.16-28.16z"
								fill="#e6e6e6" />
							<path
								d="M887.296 159.744H136.704C96.768 159.744 64 192 64 232.448v559.104c0 39.936 32.256 72.704 72.704 72.704h198.144L500.224 688.64l-36.352-222.72 162.304-130.56-61.44 143.872 92.672 214.016-105.472 171.008h335.36C927.232 864.256 960 832 960 791.552V232.448c0-39.936-32.256-72.704-72.704-72.704zm-138.752 71.68v.512H857.6c16.384 0 30.208 13.312 30.208 30.208v399.872L673.28 408.064l75.264-176.64zM304.64 792.064H165.888c-16.384 0-30.208-13.312-30.208-30.208v-9.728l138.752-164.352 104.96 124.416-74.752 79.872zm81.92-355.84l37.376 228.864-.512.512-142.848-169.984c-3.072-3.584-9.216-3.584-12.288 0L135.68 652.8V262.144c0-16.384 13.312-30.208 30.208-30.208h474.624L386.56 436.224zm501.248 325.632c0 16.896-13.312 30.208-29.696 30.208H680.96l57.344-93.184-87.552-202.24 7.168-7.68 229.888 272.896z"
								fill="#e6e6e6" />
						</svg>
					</view>
					<button style="margin: 0;" class="mini-btn" type="primary" size="mini" @click="uploadidCardF">{{
					idCardImgs ? userinfo.userOtherInfo.idCardF != null ? '重新上传' : '上传反面' : '上传中...' }}</button>
				</view>
			</view>


		</view>
		<div class="Buttarr">
			<button style="margin: 0 auto;" class="mini-btn" type="primary" size="mini" @click="saveChanges">{{ upinfo ?
					'提交保存' : "提交中" }}</button>
		</div>
	</view>
</template>

<script>
	import {
		getUser,
		deptTreeSelect,
		updateUser,
		getsexeducation,
		setuserinfodata
	} from '@/api/work/user.js'

	import
	upload
	from '@/api/components/upload.js'

	import {
		baseUrl
	} from '@/config.js'

	import {
		userInfo
	} from 'os';
	import {
		log
	} from 'util';

	export default {
		data() {
			return {
				idCardImg: true,
				idCardImgs: true,
				upinfo: true,
				date: '',
				dates: '',
				deptTree: [],
				userId: null,
				userinfo: null,
				userOtherInfo: null,
				sexs: [{
					text: '男',
					value: "0"
				}, {
					text: '女',
					value: "1"
				}],
				sexeducation: null
			}
		},

		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		onLoad(query) {
			this.userId = query.userId;

		},
		onShow() {
			this.getlist();

		},
		methods: {
			imgurl(url) {
				return `${baseUrl}${url}`
			},
			uploadidCardZ() {
				uni.chooseImage({
					count: 1,
					sizeType: ['original'],
					sourceType: ['album', 'camera'],
					success: (chooseRes) => {
						const tempFilePaths = chooseRes.tempFilePaths;
						const filePath = tempFilePaths[0];
						this.idCardImg = false

						upload({
							url: `${baseUrl}/common/upload`,
							filePath: filePath,
							name: 'file',
						}).then(data => {
							if (data.code == 200) {
								this.userinfo.userOtherInfo.idCardZ = `${data.fileName}`
								this.$modal.showToast('操作成功')
								this.idCardImg = true
							} else {
								this.$modal.showToast('操作失败')
							}

						}).catch(error => {
							this.$modal.showToast('操作失败')
						});
					},
					fail: (error) => {
						console.error("选择图片失败", error);
					}
				});
			},
			uploadidCardF() {
				uni.chooseImage({
					count: 1,
					sizeType: ['original'],
					sourceType: ['album', 'camera'],
					success: (chooseRes) => {
						const tempFilePaths = chooseRes.tempFilePaths;
						const filePath = tempFilePaths[0];
						this.idCardImgs = false
						upload({
							url: `${baseUrl}/common/upload`,
							filePath: filePath,
							name: 'file',
						}).then(data => {
							if (data.code == 200) {
								this.userinfo.userOtherInfo.idCardF = `${data.fileName}`
								this.$modal.showToast('操作成功')
								this.idCardImgs = true
							} else {
								this.$modal.showToast('操作失败')
							}

						}).catch(error => {
							this.$modal.showToast('操作失败')
						});
					},
					fail: (error) => {
						console.error("选择图片失败", error);
					}
				});
			},

			async getlist() {
				try {
					this.userInfoStarts = false;
					this.date = this.getDate({
						format: true
					});
					this.dates = this.getDate({
						format: true
					});

					if (this.userId) {
						const userResponse = await getUser(this.userId);
						if (userResponse.code !== 200) {
							throw new Error('Failed to fetch user data');
						}
						const sexEducationResponse = await getsexeducation('sys_education');
						this.sexeducation = sexEducationResponse.data;
						console.log(this.sexeducation);

						this.userinfo = userResponse.data;
						if (!this.userinfo.userOtherInfo) {
							this.userinfo.userOtherInfo = {
								contractSigningTime: '',
								entryTime: '',
								education: '',
								graduationInstitution: '',
								idCard: '',
								speciality: '',
							};
						}

						const deptRes = await deptTreeSelect();
						this.deptTree = this.flattenTree(deptRes.data);
						console.log(this.deptTree);
					} else {
						this.resetinfo();
						const sexEducationResponse = await getsexeducation('sys_education');
						this.sexeducation = sexEducationResponse.data;
					}
				} catch (error) {
					console.error(error);
				}
			},



			deptIdTree(deptId) {
				const department = this.deptTree.find(item => item.id === deptId);
				return department ? department.label : '';
			},

			getSexText(sexValue) {
				const sex = this.sexs.find(option => option.value === sexValue);
				return sex ? sex.text : '';
			},
			getSexTexts(sexValue) {
				console.log(this.sexeducation)
				const sex = this.sexeducation.find(option => option.dictValue === sexValue);
				console.log(sex)
				return sex ? sex.dictLabel : '';
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();
				if (type && type === 'start') {
					year = year - 60;
				} else if (type && type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},

			bindTimedataChange(e) {
				this.date = e.detail.value;
				this.userinfo.userOtherInfo.contractSigningTime = e.detail.value;
			},
			bindTimedatasChange(e) {
				this.dates = e.detail.value;
				this.userinfo.userOtherInfo.entryTime = e.detail.value;
			},

			bindPickerxueliChange(e) {
				console.log(e)
				this.userinfo.userOtherInfo.education = e.detail.value;
				console.log(this.sexeducation[this.userinfo.userOtherInfo.education].dictLabel)
				// this.userinfo.userOtherInfo.education = e.detail.value;
			},
			saveChanges() {
				setuserinfodata(this.userinfo).then(res => {
					if (res.code == 200) {
						this.$modal.showToast(res.msg)

						this.resetinfo()
					}

				}).catch(err => {
					console.log(err)
				})
			},
			resetinfo() {
				this.userinfo = {
					createBy: null,
					createTime: null,
					dep: null,
					deptId: null,
					email: null,
					loginDate: null,
					loginIp: null,
					nickName: null,
					password: 123456,
					phoneNumber: null,
					postIds: null,
					remark: null,
					roleId: null,
					roleIds: null,
					roles: null,
					sex: null,
					status: null,
					updateBy: null,
					updateTime: null,
					userId: null,
					userName: null,
					userOtherInfo: {
						address: null,
						bankAddress: null,
						bankCard: null,
						bankName: null,
						contractSigningTime: null,
						education: null,
						entryTime: null,
						graduationInstitution: null,
						idCard: null,
						idCardAddress: null,
						idCardF: null,
						idCardZ: null,
						speciality: null
					}
				};
			},

		},
	};
</script>

<style lang="scss" scoped>
	.content {
		width: 100%;
		height: 100%;
		padding: 5upx;
		font-family: Arial, sans-serif;
		color: #333;
		background-color: #fbfbfb;

	}

	.main {
		box-sizing: border-box;
		border-radius: 15upx;
		background-color: #fff;
		box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
		margin: 20upx;

		.main_text {
			padding: 15upx 0;
			padding-left: 25upx;
			display: block;
			font-size: 30upx;
			border-bottom: 1upx solid #ddd;
			font-weight: 700;
		}
	}


	@media screen and (min-width: 600px) {
		.content {
			width: 40%;
			height: 100%;
			padding: 20px;
			font-family: Arial, sans-serif;
			color: #333;
			margin: 0 auto;
		}
	}


	.marginautu {
		text-align: center;
		display: flex;
		// justify-content: center;
		align-items: center;
		justify-content: end;
		width: 100%;
		margin-left: 20upx;


		.uni-data-checklist {
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}

	.Buttarr {
		width: 100%;
		display: flex;
		justify-content: center;
	}

	.info-item {
		border-bottom: 1px solid #ddd;
		padding: 10px;

		span {
			margin-right: 10px;
			font-weight: bold;
		}

		.input {
			width: calc(100% - 80px);
			margin: 0 auto;
			margin-top: 15upx;
			text-align: right;
			height: 50upx;
		}
	}



	.uploadimg {
		display: flex;
		align-items: center;
		width: 100%;
		justify-content: space-around;
		margin: 0 auto 0 auto;
		margin-top: 20upx;

		img {
			width: 150px;
			height: 100px;
			margin-right: 10px;
			border-radius: 20upx;
		}

		.img_icon {
			width: 150px;
			height: 100px;
			margin-right: 10px;
			border-radius: 20upx;
			background-color: #ddd;


			svg {
				width: 100%;
				height: 100%;
			}
		}

		.mini-btn {
			height: 30px;
		}
	}



	.info_item_input {
		// border: 1px solid #ddd;
		padding: 10px;
		display: flex;
		align-items: center;

		span {
			width: 20%;
			margin-right: 10px;
			font-weight: bold;
		}

		.input {
			width: 80%;
			margin: 0 auto;
			margin-top: 15upx;
			text-align: right;
			height: 50upx;
		}
	}

	.info_item_inputs {
		// border: 1px solid #ddd;
		padding: 10px;
		display: flex;
		align-items: center;
		justify-content: space-between;

		span {
			width: 20%;
			margin-right: 10px;
			font-weight: bold;
		}

		input {
			text-align: right;

		}

		.input {
			margin: 0 auto;
			margin-top: 15upx;
			text-align: right;
			height: 50upx;
		}
	}

	.checklist-group {
		display: block;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-around;
	}

	.info_item_inputs {
		padding: 10px;
		display: flex;
		align-items: center;

		span {
			width: 30%;
			margin-right: 10px;
			font-weight: bold;
		}

		.input {
			width: 10%;
			margin: 0 auto;
			margin-top: 15upx;
			text-align: right;
			height: 50upx;
		}

	}

	.button-area {
		display: flex;
		justify-content: center;
		margin-top: 20px;

		.btn {
			padding: 10px 20px;
			background-color: #007bff;
			color: #fff;
			border: none;
			border-radius: 5px;
			cursor: pointer;
			transition: background-color 0.3s;
		}

		.btn:hover {
			background-color: #0056b3;
		}
	}
</style>